<template>
	<view v-if='active' class='sxs-dropdown-item' style='height:520rpx;overflow:hidden;'>
		<template v-if='type=="custom"'>
			<sxsDropdownCustom @success='onSuccess'></sxsDropdownCustom>
		</template>
		<template v-else>
			<scroll-view scroll-y="true" style='height:520rpx'>
				<view
					:style='styleItem'
					v-for='item in options' 
					:key='item.value'
					@click='cellClick(item.value)'
				>
					<text>{{ item.label }}</text>
					<uni-icons type="forward" size="16" v-if='forward'></uni-icons>
				</view>
			</scroll-view>
		</template>
		
	</view>
</template>

<script>
import sxsDropdownCustom from './sxs-dropdown-custom.vue'
export default{
	name:'sxs-dropdown-item',
	props:{
		//判断自定义还是标准
		type:{
			type:String,
			default:''
		},
		//下拉菜单数据
		options:{
			type:Array,
			default(){
				return []
			}
		},
		//下拉菜单key值
		dropdownKey:{
			type:String,
			default:''
		},
		//下拉菜单样式
		styleItem:{
			type:Object,
			default(){
				return {
					'padding':'15rpx 30rpx',
					'borderBottom':"1px solid #ccc",
					'display': 'flex',
					'justify-content': 'space-between',
					'align-items': 'center',
				}
			}
		},
		//箭头icons
		forward:{
			type:Boolean,
			default:false
		}
	},
	data () {
		return {
			active:false
		}
	},
	mounted(){
		this.init();
	},
	methods:{
		//查找父组件:sxs-dropdown
		getParent( pName ){
			let parent = this.$parent;
			while( parent ){
				if( parent.$options && parent.$options.name !== pName ){
					parent = parent.$parent;
				}else{
					return parent;
				}
			}
			return false;
		},
		init(){
			//找到父组件 ： sxs-dropdown
			let parent = this.getParent('sxs-dropdown');
			//判断点击菜单 在 下拉菜单是否存在 ==> 存在就展示出来
			this.active = this.dropdownKey == parent.currentKey;
			//添加当前组件
			parent.childList.push( this );
		},
		//点击下拉菜单选项
		cellClick( value ){
			//自定义事件
			this.$emit('change',{
				key:this.dropdownKey,
				value
			});
		},
		onSuccess( obj ){
			this.$emit('change', obj )
		}
	},
	components:{
		sxsDropdownCustom
	}
}
</script>

<style lang='scss'>
.sxs-dropdown-item{
	display: flex;
	flex-direction: column;
}
</style>